import React, { PureComponent } from 'react';
import {
  StyleSheet,
  Text,
  View,
  processColor
} from 'react-native';

import {HorizontalBarChart} from 'react-native-charts-wrapper';
import screen from '../../utils/screen'

export class HorizontalBarChartScreen extends PureComponent {

  constructor() {
    super();

    this.state = {
      legend: {
        enabled: true,
        textSize: 14,
        form: "SQUARE",
        formSize: 14,
        xEntrySpace: 10,
        yEntrySpace: 5,
        wordWrapEnabled: true
      },
      data: {
        dataSets: [{
          values: [{y: [40, 30, 20], marker: ["row1", "row2", "row3"]}, {
            y: [10, 20, 10],
            marker: "second"
          }, {y: [30, 20, 50], marker: ["hello", "world", "third"]}, {y: [30, 50, 10], marker: "fourth"}],
          label: 'Stacked Bar dataset',
          config: {
            colors: [processColor('#C0FF8C'), processColor('#FFF78C'), processColor('#FFD08C')],
            stackLabels: ['Engineering', 'Sales', 'Marketing']
          }
        }],
      },
      highlights: [{x: 1, stackIndex: 2}, {x: 2, stackIndex: 1}],
      xAxis: {
        valueFormatter: ['Q1', 'Q2', 'Q3', 'Q4'],
        granularityEnabled: true,
        granularity: 1

      }
    }
  }

  handleSelect(event) {
    let entry = event.nativeEvent
    if (entry == null) {
      this.setState({...this.state, selectedEntry: null})
    } else {
      this.setState({...this.state, selectedEntry: JSON.stringify(entry)})
    }

    console.log(event.nativeEvent)
  }


  render() {
    return (
      <View style={styles.container}>
        <HorizontalBarChart
          style={styles.chart}
          xAxis={this.state.xAxis}
          data={this.state.data}
          legend={this.state.legend}
          drawValueAboveBar={false}
          marker={{
            enabled: true,
            markerColor: processColor('#F0C0FF8C'),
            textColor: processColor('white'),
            markerFontSize: 14,
          }}
          highlights={this.state.highlights}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    height: screen.pxToDp(420),
    backgroundColor: '#F5FCFF'
  },
  chart: {
    flex: 1
  }
});

export default HorizontalBarChartScreen;
